<!--
 * @Author: yumao 123456
 * @Date: 2023-05-31 10:09:54
 * @LastEditors: yumao 123456
 * @LastEditTime: 2023-09-11 15:07:13
 * @FilePath: \zyDataScreen\src\views\sjdp\components\ZyScreenLeft.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div class="rightBox">
        <div class="Rtap">
            <img src="@/assets/cockpit/Rtap.png" alt="" />
        </div>
        <div class="chart-box R1_box">
            <p class="chart-box-title">内贸快销品</p>

            <!-- <p class="chartTbiao">内贸销售额(单位：万元)</p> -->
            <div class="chartIobox1">
                <div id="rightChart1" style="width: 100%; height: 120px"></div>
            </div>

            <!-- <p class="chartTbiao">销售额排行(单位：万元)</p> -->
            <div class="changxiaoList">
                <div
                    class="changxiaoI"
                    v-for="(item, index) in goodsCX"
                    :key="index"
                >
                    <div class="xiaoIL">
                        <img
                            src="@/assets/cockpit/goodN1.png"
                            alt=""
                            v-if="index == 0"
                        />
                        <img
                            src="@/assets/cockpit/goodN2.png"
                            alt=""
                            v-if="index == 1"
                        />
                        <img
                            src="@/assets/cockpit/goodN3.png"
                            alt=""
                            v-if="index == 2"
                        />

                        <span class="textT">{{ item.key }}</span>
                    </div>
                    <div class="xiaoIR">
                        <span class="num buleNum">{{ item.value }}</span>
                        <span class="unit">万元</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="chart-box R1_box" style="margin-top: 20px">
            <p class="chart-box-title">内贸大额业务</p>
            <!-- <p class="chartTbiao">内贸库存余额(单位：万元)</p> -->
            <div class="chartIobox2">
                <div id="rightChart2" style="width: 100%; height: 120px"></div>
            </div>
            <!-- <p class="chartTbiao">销售额排行(单位：万元)</p> -->
            <div class="changxiaoList">
                <div
                    class="changxiaoI"
                    v-for="(item, index) in goodsDe"
                    :key="index"
                >
                    <div class="xiaoIL">
                        <img
                            src="@/assets/cockpit/goodN1.png"
                            alt=""
                            v-if="index == 0"
                        />
                        <img
                            src="@/assets/cockpit/goodN2.png"
                            alt=""
                            v-if="index == 1"
                        />
                        <img
                            src="@/assets/cockpit/goodN3.png"
                            alt=""
                            v-if="index == 2"
                        />

                        <span class="textT">{{ item.key }}</span>
                    </div>
                    <div class="xiaoIR">
                        <span class="num buleNum">{{ item.value }}</span>
                        <span class="unit">万元</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="chart-box R2_box">
            <p class="chart-box-title">产业供应链</p>
            <ul class="goodsUl">
                <li
                    class="goodsLi"
                    v-for="(item, index) in goodsList"
                    :key="index"
                >
                    <img
                        src="@/assets/cockpit/good0.png"
                        alt=""
                        v-if="index == 0"
                    />
                    <img
                        src="@/assets/cockpit/good1.png"
                        alt=""
                        v-if="index == 1"
                    />
                    <img
                        src="@/assets/cockpit/good2.png"
                        alt=""
                        v-if="index == 2"
                    />
                    <img
                        src="@/assets/cockpit/good3.png"
                        alt=""
                        v-if="index == 3"
                    />
                    <img
                        src="@/assets/cockpit/good4.png"
                        alt=""
                        v-if="index == 4"
                    />

                    <p class="textli" style="margin-bottom: 10px"></p>
                    <p class="textli">{{ item.key }}</p>
                    <p class="textli">
                        {{ numberFormat(item.value).value
                        }}{{ numberFormat(item.value).unit }}
                    </p>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
import { screenRightData } from '@/api/cockpit.js'
export default {
    props: {},
    data() {
        return {
            // chart1
            rightChart1: null, //图表对象
            rightChart1data: {},
            rightChart2: null, //图表对象
            rightChart2data: {},
            goodsList: [], //商品列表
            goodsCX: [],
            goodsDe: []
        }
    },
    computed: {},
    created() {},
    mounted() {
        this.rightChartgetall()
    },
    watch: {},
    methods: {
        rightChartgetall(data) {
            screenRightData().then((res) => {
                this.rightChart1data = res.data.DomesticTradeInventoryChart.line
                this.drawrightChart1()
                this.rightChart2data = res.data.DomesticTradeSaleChart.line
                this.drawrightChart2()
                this.goodsList = res.data.DomesticTradeSupplyChain
                this.goodsCX = res.data.DomesticTradeGood
                this.goodsDe = res.data.DomesticTradeLargeGood
            })
        },
        drawrightChart1() {
            this.rightChart1 = this.$echarts.init(
                document.getElementById('rightChart1')
            )
            let option = {
                tooltip: {
                    trigger: 'axis'
                },

                toolbox: {
                    show: true
                },
                grid: {
                    left: '0%',
                    right: '2%',
                    bottom: '0%',
                    top: '8%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false, //是否从0刻度开始绘制
                    axisLine: {
                        show: false,
                        lineStyle: {
                            color: '#618AB8'
                        }
                    },
                    axisLabel: {
                        // interval: 1, //横轴信息全部显示
                        // rotate: 40, //-30度角倾斜显示
                        color: '#618AB8', //坐标的字体颜色
                        fontSize: 14
                    },
                    axisTick: {
                        show: false
                    },
                    splitLine: {
                        show: false
                    },
                    data: this.rightChart1data.xAxis.map((item) => {
                        return item + '月'
                    })
                },
                yAxis: {
                    type: 'value',
                    // name: '单位（万元）',
                    // scale: true,
                    boundaryGap: true,
                    nameTextStyle: {
                        color: '#618AB8',
                        nameLocation: 'start'
                    },
                    axisLabel: {
                        color: '#618AB8', //坐标的字体颜色
                        fontSize: 14,
                        formatter: function (value, index) {
                            if (value === 0) {
                                return '0'
                            } else {
                                return value
                            }
                        }
                    },
                    splitLine: {
                        show: false,
                        //  改变轴线颜色
                        lineStyle: {
                            // 使用深浅的间隔色
                            color: ['rgba(0,114,255,0.2)']
                        }
                    }
                },
                series: [
                    {
                        name: '',
                        type: 'line',
                        smooth: false,
                        itemStyle: {
                            color: '#00FFEA',
                            lineStyle: {
                                color: '#FDF052',
                                width: '1'
                            }
                        },
                        areaStyle: {
                            color: new this.$echarts.graphic.LinearGradient(
                                0,
                                0,
                                0,
                                1,
                                [
                                    {
                                        offset: 0,
                                        color: 'rgba(0, 255, 234, 0.8)'
                                    },
                                    {
                                        offset: 1,
                                        color: '#02133E'
                                    }
                                ]
                            )
                        },
                        data: this.rightChart1data.series
                    }
                ]
            }
            this.rightChart1.setOption(option)
        },
        drawrightChart2() {
            this.rightChart2 = this.$echarts.init(
                document.getElementById('rightChart2')
            )
            let option = {
                tooltip: {
                    trigger: 'axis'
                },

                toolbox: {
                    show: true
                },
                grid: {
                    left: '0%',
                    right: '2%',
                    bottom: '0%',
                    top: '8%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false, //是否从0刻度开始绘制
                    axisLine: {
                        show: false,
                        lineStyle: {
                            color: '#618AB8'
                        }
                    },
                    axisLabel: {
                        // interval: 1, //横轴信息全部显示
                        // rotate: 40, //-30度角倾斜显示
                        color: '#618AB8', //坐标的字体颜色
                        fontSize: 14
                    },
                    axisTick: {
                        show: false
                    },
                    splitLine: {
                        show: false
                    },
                    data: this.rightChart2data.xAxis.map((item) => {
                        return item + '月'
                    })
                },
                yAxis: {
                    type: 'value',
                    // name: '单位（万元）',
                    // scale: true,
                    boundaryGap: true,
                    nameTextStyle: {
                        color: '#aaa',
                        nameLocation: 'start'
                    },
                    axisLabel: {
                        color: '#618AB8', //坐标的字体颜色
                        fontSize: 14
                    },
                    splitLine: {
                        show: false,
                        //  改变轴线颜色
                        lineStyle: {
                            // 使用深浅的间隔色
                            color: ['rgba(0,114,255,0.2)']
                        }
                    }
                },
                series: [
                    {
                        name: '',
                        type: 'line',
                        smooth: false,
                        itemStyle: {
                            color: '#00FFEA',
                            lineStyle: {
                                color: '#FDF052',
                                width: '1'
                            }
                        },
                        areaStyle: {
                            color: new this.$echarts.graphic.LinearGradient(
                                0,
                                0,
                                0,
                                1,
                                [
                                    {
                                        offset: 0,
                                        color: 'rgba(0, 255, 234, 0.8)'
                                    },
                                    {
                                        offset: 1,
                                        color: '#02133E'
                                    }
                                ]
                            )
                        },
                        data: this.rightChart2data.series
                    }
                ]
            }
            this.rightChart2.setOption(option)
        },
        // 转换单位
        numberFormat(value) {
            let param = {}
            let k = 10000
            let sizes = ['', '万', '亿', '万亿']
            let i = 0
            if (value < k) {
                param.value = value
                param.unit = ''
            } else {
                i = Math.floor(Math.log(value) / Math.log(k))
                param.value = (value / Math.pow(k, i)).toFixed(2)
                param.unit = sizes[i]
            }
            return param
        }
    },
    components: {}
}
</script>

<style lang="scss" scoped>
.rightBox {
    width: 100%;
    position: relative;
    box-sizing: border-box;
    padding-right: 47px;
    cursor: pointer;
    .Rtap {
        position: absolute;
        right: 2px;
        top: 0;
        width: 32px;
        height: 660px;
        img {
            width: 100%;
            height: 100%;
        }
    }
    &:hover {
        .Rtap {
            -webkit-animation-name: scaleDraw; /*关键帧名称*/
            -webkit-animation-timing-function: ease; /*动画的速度曲线*/
            // -webkit-animation-iteration-count: infinite; /*动画播放的次数*/
            -webkit-animation-iteration-count: infinite; /*动画播放的次数*/
            -webkit-animation-duration: 1.5s; /*动画所花费的时间*/
        }
    }
    p {
        padding: 0;
        margin: 0;
    }

    .chart-box {
        width: 100%;
        background-size: cover;
        height: 100%;
        position: relative;
        &-title {
            width: 100%;
            height: 28px;
            line-height: 28px;
            font-size: 21px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #fafcfc;
            text-align: center;
            position: absolute;
            left: 0;
            top: 0;
        }
    }
    .chartTbiao {
        font-size: 16px;
        font-family: MicrosoftYaHei;
        background-image: -webkit-linear-gradient(
            bottom,
            #45ff8f 0%,
            #38e7ee 100%
        );
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        font-weight: 600;
    }
    .chartIobox1 {
        width: 100%;
        margin-top: 3px;
        margin-bottom: 13px;
    }
    .chartIobox2 {
        width: 100%;
        margin-top: 5px;
        margin-bottom: 13px;
    }
    .changxiaoList {
        display: flex;
        margin-top: 10px;
        .changxiaoI {
            display: flex;
            align-items: center;
            margin-right: 10px;
            .xiaoIL {
                width: 65px;
                height: 32px;
                position: relative;
                text-align: center;
                line-height: 35px;
                overflow: hidden;
                img {
                    width: 100%;
                    height: 100%;
                    position: absolute;
                    left: 0;
                    top: 0;
                }
                .textT {
                    color: #fff;
                    z-index: 2;
                    position: absolute;
                    width: 100%;
                    height: 100%;
                    left: 0;
                    top: 0;
                    font-size: 12px;
                }
            }
            .xiaoIR {
                font-size: 13px;
                color: #fff;
                .num {
                    font-family: 'Yourname';
                    font-size: 20px;
                }
                .unit {
                    font-size: 12px;
                    color: #ffffff;
                    font-weight: 400;
                    font-family: 'fangzheng';
                    margin-left: 0px;
                }
            }
        }
    }
    .R1_box {
        height: 214px;
        background-image: url('../../../assets/cockpit/R1.png');
        box-sizing: border-box;
        padding: 30px 10px 0 28px;
    }
    .R2_box {
        height: 175px;
        background-image: url('../../../assets/cockpit/R2.png');
        margin-top: 17px;
        box-sizing: border-box;
        padding: 38px 19px 0 34px;
        .goodsUl {
            width: 100%;
            display: flex;
            justify-content: space-between;
            .goodsLi {
                width: 83px;
                height: 133px;
                text-align: center;
                position: relative;
                box-sizing: border-box;
                padding-top: 50px;
                img {
                    width: 100%;
                    height: 100%;
                    position: absolute;
                    left: 0;
                    top: 0;
                }
                .textli {
                    width: 80%;
                    margin: auto;
                    font-size: 14px;
                    color: #fff;
                }
            }
        }
    }
    .buleNum {
        color: #46b9f3;
    }
    .greenNum {
        color: #1ce480;
    }
    .redNum {
        color: #f5375b;
    }
    @keyframes scaleDraw {
        /*定义关键帧、scaleDrew是需要绑定到选择器的关键帧名称*/
        0% {
            transform: scale(1); /*开始为原始大小*/
        }
        50% {
            transform: scale(1.2); /*放大1.1倍*/
        }
    }
}
</style>